<template>
  <div class="fans-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- card body -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="first">
          <el-row :gutter="10">
            <el-col
              v-for="fan in fans"
              :key="fan.id.toString()"
              :xs="6"
              :sm="4"
              :md="4"
              :lg="4"
            >
              <div class="fan-item">
                <el-avatar
                  icon="el-icon-user-solid"
                  :size="80"
                  shape="circle"
                  :src="fan.photo"
                  fit="fill"
                ></el-avatar>
                <p>{{ fan.name }}</p>
                <el-button type="primary" plain size="small">+关注</el-button>
              </div>
            </el-col>
          </el-row>
          <!-- 分页 -->
          <el-pagination
            class="pages"
            background
            layout="prev, pager, next, total"
            :total="total"
            :page-size="per_page"
            @current-change="pageChange"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="second">
          <!-- 图表渲染容器 -->
          <div ref="chartsDom" style="width: 600px; height: 360px">图表</div>
        </el-tab-pane>
        <el-tab-pane label="其它" name="third">
          <div>图表2</div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入获取粉丝列表接口
import { getUserFans, getFansStatistics } from '@/api/user'
import * as echarts from 'echarts'
console.log(echarts)
/**
 * 1. 安装: npm i echarts
 * 2. 导入使用：import * as echarts from 'echarts'
 * 3. 通过cosnt es = echarts.init(dom/图表显示容器)
 * 4. es.setOption(option配置项)
 */
export default {
  data () {
    return {
      // 当前选中tab
      activeName: 'second',
      // 粉丝列表数据
      fans: [],
      // 总粉丝数量
      total: 0,
      // 当前页
      page: 1,
      // 每页显示几条
      per_page: 24
    }
  },
  created () {
    this.loadFans()
  },
  mounted () {
    this.loadChartsData()
  },
  methods: {
    // 获取图表显示所需数据
    async loadChartsData () {
      /**
       * 1. 拿到图表数据
       * 2. 把数据传给绘制图表方法
       */
      try {
        const { data: { data } } = await getFansStatistics()
        // 绘制echarts
        this.drawCharts(data)
      } catch (error) {
        console.warn('使用假数据！')
        // 后台数据结构
        const data = {
          gender: {
            male: 68,
            female: 94
          },
          age: {
            le18: 72,
            le23: 88,
            le30: 74,
            le40: 50,
            le50: 68,
            gt50: 88
          },
          device: {
            ios: 45,
            android: 99
          }
        }
        this.drawCharts(data)
      }
    },
    // 绘制图表
    drawCharts (data) {
      // 创建echarts实例
      const es = echarts.init(this.$refs.chartsDom)
      console.log('echarts实例', es)
      // echarts配置节点(图表样式配置和数据)
      // 处理后台数据
      // 柱状图使用的数据
      // age: {
      //   le18: 72,
      //   le23: 88,
      //   le30: 74,
      //   le40: 50,
      //   le50: 68,
      //   gt50: 88
      // }
      const ages = data.age
      // 声明x和y轴需要的数据
      const ageX = []; const ageY = []
      Object.keys(ages).forEach((x) => {
        ageX.push(x.replace('le', '小于').replace('gt', '大于') + '岁')
        ageY.push(ages[x])
      })

      const option = {
        title: {
          text: '粉丝年龄区间分布图',
          left: 'center',
          textStyle: {
            color: 'red'
          }
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ageX
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: ageY
        }]
      }
      // 根据options设置图表并显示
      es.setOption(option)
    },
    // 获取粉丝数据
    async loadFans () {
      // eslint-disable-next-line camelcase
      const { page, per_page } = this
      const params = {
        page,
        per_page
      }
      const { data: { data } } = await getUserFans(params)
      // 存储列表总数
      this.total = data.total_count
      // console.log(data)
      this.fans = data.results
    },
    pageChange (curPage) {
      // 存储当前切换的页码
      this.page = curPage
      this.loadFans()
    }
  }
}
</script>

<style lang="less" scoped>
.fan-item {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #eee;
  height: 200px;
  p {
    margin: 10px;
  }
}
</style>
